<!--我的订单-->
<template>
  <div class="container orders user">
    <UserSidebar />
    <div class="user-frame">
      <div class="orders-frame">
        <div class="title-frame">
          <p style="margin-left: 0.3rem">MY ORDER</p>
          <div class="title-panel">
            <div
              class="nav-frame ac-bg"
              v-for="(item, index) in navList"
              :key="index"
              @click="clickNav(index)"
            >
              <div class="nav-panel">
                <div class="nav-fast">
                  <van-icon :name="item.icon" />
                </div>
              </div>
              <div class="nav-label">
                <p class="label">{{ item.name }}</p>
                <div class="icon-frame" v-if="navIndex == index"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="!loading" class="orderList-frame">
          <div
            class="order-panel"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="label-frame">
              <div class="label-panel">
                <span> ID: {{ item.order_code }}</span>
              </div>
              <span>{{ item.created_at }}</span>
            </div>
            <div class="order-fast">
              <div
                class="product-frame"
                v-for="(pro, imgindex) in item.products"
                :key="'img' + imgindex"
              >
                <div class="img-frame" @click="clickPro(pro)">
                  <van-image
                    class="img"
                    fit="cover"
                    lazy-load
                    :src="pro.product_pic"
                  />
                </div>
                <div class="product-panel">
                  <p class="product-name" @click="clickPro(pro)">
                    {{ pro.product_title }}
                  </p>
                  <p class="product-type" @click="clickPro(pro)">
                    {{ pro.attribute_name }}
                  </p>
                  <span
                    class="comment ac-bg"
                    @click="clickComment(index, imgindex)"
                    v-if="
                      item.status == 0 &&
                      item.flow_step == 20 &&
                      pro.is_reviews == 0
                    "
                  >
                    Comment
                  </span>
                  <span class="comment-label" v-if="pro.is_reviews == 1">Evaluated</span>
                </div>
                <div class="price-frame">
                  <p>${{ parseFloat(pro.total_price) }}</p>
                  <p>x{{ pro.amount }}</p>
                </div>
              </div>
              <div class="tips-frame">
                <p class="tips">
                  <span>Product Total Price:${{ parseFloat(item.product_total_price) }}</span>
                  <span style="margin-left: 0.5rem"
                    >Shipping Cost:${{ parseFloat(item.freightl_price) }}</span
                  >
                  <span style="margin-left: 0.5rem"
                    >Total:${{ parseFloat(item.actual_total_price) }}</span
                  >
                </p>
                <p class="tips" style="color: #f9644e" v-if="item.status == 0">
                  <span v-if="item.flow_step == 0">To be paid</span>
                  <span v-if="item.flow_step == 5">To be delivered</span>
                  <span v-if="item.flow_step == 10">To be received</span>
                  <span v-if="item.flow_step == 20">Order complete</span>
                </p>
              </div>
              <div class="tips-frame" v-if="item.status == -2">
                <p class="tips" style="color: #f9644e">Order refunded</p>
              </div>
              <div class="btn-frame" v-if="item.status == 0">
                <div
                  class="btn-panel ac-bg"
                  v-if="item.flow_step == 0"
                  @click="cancelOrder(index)"
                >
                  Close
                </div>
                <div
                  class="ac-bg btn-panel bg"
                  v-if="item.flow_step == 0"
                  @click="clickPay(item)"
                >
                  Pay
                </div>
                <div
                  class="ac-bg btn-panel bg"
                  @click="queryExpress(index)"
                  v-if="item.flow_step == 10"
                >
                  Query Logistics
                </div>
                <div
                  class="ac-bg btn-panel bg"
                  @click="clickConfirm(index)"
                  v-if="item.flow_step == 10"
                >
                  Confirm receipt
                </div>
              </div>
            </div>
          </div>
        </div>
        <Loading v-else />
        <Nodata v-if="orderList.length == 0 && !loading" />
      </div>
      <van-pagination
        v-model="form.page"
        :total-items="proTotal"
        :items-per-page="form.page_size"
        :show-page-size="5"
        class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
        v-if="proTotal > form.page_size && !loading"
        @change="pageChange"
        style="margin-top: 0.7rem"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
  </div>
</template>
<script>
import tool from "@/common/tool.js";
export default {
  data() {
    return {
      navList: [
        {
          icon: "orders-o",
          name: "All Order",
          flow_step: [0, 5, 10, 20],
          status: 0,
        },
        {
          icon: "pending-payment",
          name: "Payment For",
          flow_step: [0],
          status: 0,
        },
        {
          icon: "shop-o",
          name: "To be delivered",
          flow_step: [5],
          status: 0,
        },
        {
          icon: "logistics",
          name: "Shipping For",
          flow_step: [10],
          status: 0,
        },

        {
          icon: "completed",
          name: "Completed",
          flow_step: [20],
          status: 0,
        },
        {
          icon: "replay",
          name: "Refunded",
          flow_step: [],
          status: -2,
        },
      ],
      navIndex: 0,
      orderList: [], //订单列表
      loading: true,
      form: {
        flow_step: [0, 5, 10, 20],
        status: 0,
        page: 1,
        page_size: 10,
      },
      proTotal: 0,
    };
  },
  computed: {
    orderListRefre() {
      return this.$store.state.order.orderListRefre;
    },
  },
  activated() {
    if (this.orderListRefre) {
      let navIndex =
        this.$route.query.navIndex == undefined
          ? 0
          : this.$route.query.navIndex;
      this.clickNav(navIndex);
    }
  },
  mounted() {
    this.intData();
    try {
      this.tips.closeToast();
    } catch (error) {}
  },
  watch: {
    $route(to, form) {
      if (to.path == form.path) {
        let navIndex =
          this.$route.query.navIndex == undefined
            ? 0
            : this.$route.query.navIndex;
        let offset =
          this.$route.query.offset == undefined ? 1 : this.$route.query.offset;
        this.clickNav(navIndex, offset);
      }
    },
  },
  methods: {
    intData() {
      let offset =
        this.$route.query.offset == undefined ? 1 : this.$route.query.offset;
      let navIndex =
        this.$route.query.navIndex == undefined
          ? 0
          : this.$route.query.navIndex;
      this.navIndex = navIndex;
      this.form.flow_step = this.navList[navIndex].flow_step;
      this.form.status = this.navList[navIndex].status;
      this.form.page = offset;
      this.getOrderList();
    },
    //点击分类,offset:分页
    clickNav(index, offset = 1) {
      this.navIndex = index;
      this.form.flow_step = this.navList[index].flow_step;
      this.form.status = this.navList[index].status;
      this.form.page =offset;
      this.orderList = [];
      this.$router.replace({
        path: "/user/order",
        query: {
          navIndex: index,
          offset: offset,
        },
      });
      this.getOrderList();
    },
    //点击评价
    clickComment(orderindex, proindex) {
      this.$store.commit(
        "order/setCommentInfo",
        this.orderList[orderindex].products[proindex]
      );
      this.$router.push("/user/order/ordercoment");
    },
    //获取订单列表
    async getOrderList() {
      this.loading = true;
      let res = await this.$store.dispatch("order/orderList", this.form);
      this.loading = false;
      //console.log(res);
      if (res.code == 0 && res.data != undefined) {
        this.orderList = res.data.list;
        this.proTotal = res.data.paginatio.total;
      }
    },
    //支付订单
    async clickPay(order) {
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("order/orderPay", {
        order_id: order.id,
        pay_channel: 10,
      });
      if (res.code == 0 && res.data != undefined) {
        tool.setStorageAsyn("payConfirmId", order.id, () => {});
        location.href = res.data.pay_url;
      } else {
        this.$toast.fail(res.msg);
      }
    },
    //取消订单
    async cancelOrder(index) {
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("order/orderClose", {
        id: this.orderList[index].id,
      });
      this.tips.closeToast();
      if (res.code == 0) {
        this.$toast.success("Closed successfully");
        this.orderList.splice(index, 1);
      } else {
        this.$toast.fail(res.msg);
      }
    },
    //换页
    pageChange(index) {
      this.form.page = index;
      this.orderList = [];
      this.$router.push({
        path: "/user/order",
        query: {
          navIndex: this.navIndex,
          offset: index,
        },
      });
      this.getOrderList();
    },
    //查询物流
    queryExpress(index) {
      location.href =
        "https://t.17track.net/en#nums=" +
        this.orderList[index].tracking_number;
    },
    //点击商品
    clickPro(item) {
      this.$router.push({
        path:
          "/product/" +
          item.item_id +
          "/" +
          tool.urlCheckForMenuTitle(item.product_title),
      });
    },
    //确认收货
    async clickConfirm(index) {
      this.tips.startLoadingToast();
      let res = await this.$store.dispatch("order/orderConfirm", {
        id: this.orderList[index].id,
      });
      this.tips.closeToast();
      if (res.code == 0) {
        this.$toast.success("Confirm successful receipt");
        this.orderList.splice(index, 1);
      } else {
        this.$toast.fail(res.msg);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "order.less";
@import "@/pages/user/user.less";
</style>